<template>
  <div id="create" class="container">
    <el-form ref="form" :model="task" label-width="80px">
      <el-form-item label="悬赏标题">
        <el-input v-model="task.title"></el-input>
      </el-form-item>
      <el-form-item label="悬赏奖励">
        <el-input v-model="task.reward"></el-input>
      </el-form-item>
      <el-form-item label="领奖代码">
        <el-input v-model="task.code">
          <el-button slot="append" @click="onGenCode">随机生成</el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="悬赏说明">
        <el-input type="textarea" v-model="task.content"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
    <div>
      <el-card class="box-card" v-show="success">
        <div slot="header" class="clearfix">
          悬赏创建成功!
        </div>
        <div>
          <span style="color: red;">请等待钱包确认交易成功</span>，将悬赏写入区块链。
        </div>
        <div>
          请牢记您的悬赏ID（复制链接分享悬赏）:
          <div style="color: #ff4c4c;">
            <a v-bind:href="'/nebulas-reward/#/detail/' + task.taskId ">{{ task.taskId }}</a>
          </div>
          以及领奖代码:
          <div style="color: #ff4c4c;">
            {{ task.code }}
          </div>
        </div>
      </el-card>
     </div>
  </div>
</template>

<script>
  import util from '../util'
  import BigNumber from 'bignumber.js'

  var serialNumber;

  export default {
    name: 'create',
    data () {
      return {
        success: false,
        task: {
          title: '',
          reward: "0.0001",
          content: "",
          code: '',
          taskId: '',
        }
      }
    },
    methods: {

      onGenCode() {
        var key = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
        var code = '';
//                Math.random.seed(Blockchain.block.seed);
        for (var i = 0; i < 10; i++) {
          var rand = parseInt(Math.random()*key.length);
          var t = key[rand];
          code = code + t;
        }

        this.task.code = code;
      },
      listenWallet() {
        window.addEventListener('message', function(resp) {
          console.log("nebpay: received resp.data: " + JSON.stringify(resp.data));
          if(resp.data.src !== "content")
            return;
          if(typeof resp.data.resp !== 'object')
            return;
          var key = resp.data.serialNumber;
          console.log(resp.data.resp);
          var txhash = resp.data.resp.txhash;
          console.log('->key: ' + key);
          console.log('->txthash: ' + txhash);
          this.task.taskId = txhash;
          this.success = true;
        }.bind(this));
      },
      onSubmit() {
        if (this.task.title.length < 1) {
          this.$message({
            showClose: true,
            message: '请输入悬赏标题',
            type: 'error'
          });
          return;
        }
        if (this.task.title.length > 32) {
          this.$message({
            showClose: true,
            message: '悬赏标标题不能超过32个字符！',
            type: 'error'
          });
          return;
        }
        var reward = new BigNumber(this.task.reward);
        if (reward.lt(new BigNumber(0.0000001))) {
          this.$message({
            showClose: true,
            message: '悬赏奖励不能少于0.0000001 Nas！',
            type: 'error'
          });
          return;
        }
        if (this.task.code.length < 1) {
          this.$message({
            showClose: true,
            message: '请输入领奖代码！',
            type: 'error'
          });
          return;
        }
        if (this.task.code.length > 32) {
          this.$message({
            showClose: true,
            message: '领奖代码能超过32个字符！',
            type: 'error'
          });
          return;
        }

        if (this.task.content.length < 1) {
          this.$message({
            showClose: true,
            message: '请输入悬赏说明！',
            type: 'error'
          });
          return;
        }
        if (this.task.content.length > 512) {
          this.$message({
            showClose: true,
            message: '悬赏说明不能超过32个字符！',
            type: 'error'
          });
          return;
        }


        var to = util.config.dappaddr;
        var value = this.task.reward;
        var callFunc = "create";
        var codehash = util.sha1(this.task.code);
        var callArgs = '["' + this.task.title + '", "' + this.task.content + '", "' + codehash + '"]';
        console.log("codehash: " + codehash);
        var option = {
          listener: this.onCallBack,
          callback: util.config.callback
        }
        this.listenWallet();
        serialNumber = util.nebPay.call(to, value, callFunc, callArgs, {
          listener: (data) => {
            if (typeof data === 'object') {
              console.log("listener:" + data);
            } else {
              this.$message({
                showClose: true,
                message: '交易被取消，悬赏创建失败！',
                type: 'error'
              });
            }
          }
        });

        console.log('serialnumber: ' + serialNumber);
      }
    }
  };
</script>

<style>
  .container {
    background-color: #fff;
    padding: 30px 10px 10px 0px;
  }
  .info {
    text-align: center;
    margin-bottom: 30px;
    padding-top: 30px;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 80%;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
  }
</style>
